<template>
	<view class="detail-mod">
		<scroll-view scroll-y="true" class="scroll-view" :scroll-into-view="toView" scroll-with-animation
			@scroll="scroll">
			<view class="page">
				<imgsBanner :imgList='imgList' :currentImg='currentImg' :imgDatas="slideData" @getIndex="getIndex">
				</imgsBanner>
			</view>
			<view class="flex iconfont deal">
				<text>成交<text class="deal-num">999999</text>单</text>
				<text class="share-btn">&#xe7e7; 分享</text>
			</view>
			<view class="wrap2 detail-shade">

			</view>
			<view class="flex detail-ticket-box bw wrap2" @click="ticketClick">
				<view class="flex">
					<text class="detail-ticket-title">优惠券</text>
					<view class="" v-for="item,index in ticketList" :key="index">
						<image :src="item" mode="" class="detail-ticket-img"></image>
					</view>
				</view>
				<view class="iconfont">
					&#xe731;
				</view>
			</view>
			<view class="cross-line">
			</view>
			<view class="iconfont flex bw wrap2 detailDataListClassify" @click="clickPromptConfirm">
				<view class="flex">
					<view v-for="item,index in detailDataList" :key="index">
						<text :class="item.iconClass" class="color fw detailDataItem"></text>
						<text class="detailDataText">{{item.text}}</text>
					</view>
				</view>
				<view class="">
					&#xe731;
				</view>
			</view>
			<view class="cross-line">
			</view>
			<view class="detailNav-box">
				<view class="detailNav flex" ref="detailNav" :class="{detailNavFixed:isTop==1}">

					<view class="once center" :data-id="'img'+index" @tap="detailNavClick($event,index)"
						:class="{detailNavItemActiv:index==detailNavCurrent}" v-for="item,index in detailNavList"
						:key="index">
						{{item.toUpperCase()}}
					</view>

				</view>
			</view>
			<view class="">
				<view class="" v-for="(item,index) in bannerList" :key='index' :id="'img'+index">
					<image :src="item.imgURL" mode="" :class="item.imgClass"></image>
				</view>
			</view>
			<view class="cross-line">
			</view>
			<view class="" id="img2">
				<appraise :list="bvaluate"></appraise>
			</view>
		</scroll-view>
		<wyb-popup ref="ticketPopup" type="bottom" height="620" width="500" radius="6" :showCloseIcon="true" title="优惠">
			<view class="popup-content">
				<text class="app-ticket-text">已领取的优惠券</text>
				<view class="detail-ticketBox">
					<image src="../../static/detailImg/detail-ticket1.png" mode="" class="detail-ticketImg"></image>
					<image src="../../static/detailImg/detail-ticket2.png" mode="" class="detail-ticketImg"></image>
				</view>
			</view>
		</wyb-popup>
		<wyb-popup ref="detailPopup" type="bottom" height="1100" width="500" radius="6" :showCloseIcon="true"
			title="到家精选服务保障">
			<scroll-view class="popup-content" scroll-y="true">
				<image src="../../static/detailImg/detail-checked.jpg" mode="" class="detail-checked"></image>
			</scroll-view>
		</wyb-popup>
		<bottomNav>
			<view class="detailBottomNav-pad width hight" @click="bottomClick">
				<view class="detailBottomNav-suspended fz">
					下单立减{{discountsPrice}}元
				</view>
				<view class="detailBottomNav-box hight">
					<view class="fw">立即预约</view>
					<view class="fz">
						券后{{newPrice}}元/{{time}}小时
					</view>
				</view>
			</view>
		</bottomNav>
	</view>
</template>

<script>
	import mapDetail from "./detail.js"
	import imgsBanner from '../../components/imgsBanner-tag/imgsBanner-tag.vue'
	import appraise from "../../components/appraise/appraise.vue"
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue'
	import bottomNav from '../../components/bottomNav/bottomNav.vue'
	export default {
		name: 'DetailItem',
		onLoad(obj) {
			uni.setNavigationBarTitle({
				title: obj.title
			})
		},
		components: {
			imgsBanner, //顶部轮播
			bottomNav, //底部自定义导航栏
			appraise, //用户评价
			wybPopup,
		},
		data() {
			return {
				isTop: 0, //吸顶状态判断
				myScroll: 0,
				currentImg: 0, //当前默认选中
				detailNavCurrent: 0,// 当前选中导航
				toView: '', // 索引锚点
				tabbarButtomIntro: 0, //默认选中
				imgList: [...mapDetail.imgList],
				slideData: [...mapDetail.slideData],
				ticketList: [...mapDetail.ticketList],
				detailDataList: [...mapDetail.detailDataList],
				detailNavList: [...mapDetail.detailNavList],
				bannerList: [...mapDetail.bannerList],
				tabbarList: [...mapDetail.tabbarList],
				priceList: [...mapDetail.priceList],
				bvaluate: [...mapDetail.bvaluate],
			};
		},
		mounted() {
			// 获取需要吸顶的元素距离顶部的距离
			const top = this.$refs.detailNav.$el.getBoundingClientRect().top
			//获取元素自身的高度
			const height = this.$refs.detailNav.$el.getBoundingClientRect().height
			// 元素上边距距离顶部的距离
			this.myScroll = (top - height) + 5;
		},
		methods: {
			// 页面滚动事件监听
			scroll(e) {
				//距离顶部的距离
				let top = e.detail.scrollTop
				this.isTop = top >= this.myScroll ? 1 : 0
			},
			detailNavClick(event, index) {
				this.detailNavCurrent = index
				var id = event.currentTarget.dataset.id;
				this.toView = id
			},
			getIndex(index) {
				this.tabbarButtomIntro = index;
			},
			/**
			 * 点击弹出输入框确定
			 */
			clickPromptConfirm(val) {
				this.$refs.detailPopup.show()
			},
			/**
			 * 点击弹出输入框确定
			 */
			ticketClick(val) {
				this.$refs.ticketPopup.show()
			},
			bottomClick() {
				uni.navigateTo({
					url: "/pages/indent/indent?id=" + this.tabbarButtomIntro + "&title=确认订单" + '&name=日常保洁'
				})
			}
		},
		computed: {
			discountsPrice() {
				return (this.slideData[this.tabbarButtomIntro].del_price - this.slideData[this.tabbarButtomIntro]
					.now_price).toFixed(2)
			},
			newPrice() {
				return this.slideData[this.tabbarButtomIntro].now_price
			},
			time() {
				switch (this.tabbarButtomIntro) {
					case 0:
						return 2;
					case 1:
						return 3;
					default:
						return 4;
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
